チャートの更新

チャートを作成した後に更新したいと思うのはよくあることです。グラフのデータまたはオプションが変更されると、Chart.js は新しいデータ値とオプションに合わせてアニメーション化されます。

データの追加または削除

データの追加と削除は、データ配列を変更することでサポートされます。データを追加するには、この例に示すようにデータ配列にデータを追加するだけです。

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

オプションの更新

オプションを更新するには、適切なオプション プロパティを変更するか、新しいオプション オブジェクトを渡すことがサポートされています。

• オプションがその場で変更された場合、Chart.js によって計算されたプロパティを含む他のオプション プロパティは保持されます。
• 新しいオブジェクトとして作成された場合、オプションを使用して新しいチャートを作成するようなものになります。古いオプションは破棄されます。

function updateConfigByMutating(chart) {
    chart.options.title.text = 'new title';
    chart.update();
}

function updateConfigAsNewObject(chart) {
    chart.options = {
        responsive: true,
        title: {
            display: true,
            text: 'Chart.js'
        },
        scales: {
            xAxes: [{
                display: true
            }],
            yAxes: [{
                display: true
            }]
        }
    };
    chart.update();
}

スケールは、他のオプションを変更せずに個別に更新できます。 スケールを更新するには、変更されていないものを含むすべてのカスタマイズを含むオブジェクトを渡します。

からのいずれかを参照する変数chart.scales新しいスケールで体重計を更新すると失われますidまたは変更されたtype。

function updateScales(chart) {
    var xScale = chart.scales['x-axis-0'];
    var yScale = chart.scales['y-axis-0'];
    chart.options.scales = {
        xAxes: [{
            id: 'newId',
            display: true
        }],
        yAxes: [{
            display: true,
            type: 'logarithmic'
        }]
    };
    chart.update();
    // need to update the reference
    xScale = chart.scales['newId'];
    yScale = chart.scales['y-axis-0'];
}

インデックスまたは ID を指定して、特定のスケールを更新することもできます。

function updateScale(chart) {
    chart.options.scales.yAxes[0] = {
        type: 'logarithmic'
    };
    chart.update();
}

オプションを更新するためのコードサンプルは、次の場所にあります。トグルスケールタイプ.html。

アニメーションの防止

チャートが更新されるときに、アニメーションが不要な場合があります。これを達成するには、次のように呼び出すことができますupdate期間は0。これにより、チャートがアニメーションなしで同期的にレンダリングされます。